<template>
    <div class="dataCollection_container">
        <Modal v-model="modalShow1" :title="title" :ok-text="text" :width="width"
                @on-cancel="onCancel"
                @on-ok="onOk" style="z-index: 10000;min-width: 1000px;max-width: 1200px;">
            <slot name="modalContent"></slot>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "lightModal",
        components: {},
        props: {
            modalShow: {
                type: Boolean,
                default: false // 弹框是否显示
            },
            title: {
                type: String, // 弹框标题
                default: ''
            },
            text: {
                type: String,
                default: '保存' // 按钮文字
            },
            width: {
                type: String,
                default: '50' // 弹框宽度
            }
        },
        data () {
            return {
                data1: [],
                // modal1:false
                modalShow1:this.modalShow
            }
        },
        computed: {},
        watch: {
            modalShow(val) {
                this.modalShow1 = val;
            },
        },
        methods: {
            onCancel () {
                this.$emit('closeModal', false)
            },
            onOk () {
                this.$emit('okModal', false)
            }
        },
        created () {
            // alert(this.modal)
        },
        mounted () {},
        beforeCreate () {}, // 生命周期 - 创建之前
        beforeMount () {}, // 生命周期 - 挂载之前
        beforeUpdate () {}, // 生命周期 - 更新之前
        updated () {}, // 生命周期 - 更新之后
        beforeDestroy () {}, // 生命周期 - 销毁之前
        destroyed () {}, // 生命周期 - 销毁完成
        activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>

<style  scoped src="@/styles/common/modal.css"></style>

<style lang='scss' scoped>
    .dataCollection_container {
        width: 100%;
    }
</style>
